<page-header></page-header>
<nz-card style="min-height: calc(100vh - 225px)">
  <form nz-form [formGroup]="searchForm" class="ant-advanced-search-form">
    <div class="row">
      <div class="col-1-5 col-1-5-md">
        <nz-form-item nzFlex>
          <nz-form-label nzFor="volunteerName">真实姓名</nz-form-label>
          <nz-form-control class="flex2">
            <input nz-input formControlName="volunteerName" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="col-1-5 col-1-5-md">
        <nz-form-item nzFlex>
          <nz-form-label nzFor="idNumber">身份证号码</nz-form-label>
          <nz-form-control class="flex2">
            <input nz-input formControlName="idNumber" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="col-1-5 col-1-5-md">
        <nz-form-item nzFlex>
          <nz-form-label nzFor="volunteerNickname">昵称</nz-form-label>
          <nz-form-control class="flex2">
            <input nz-input formControlName="volunteerNickname" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="col-1-5 col-1-5-md">
        <nz-form-item nzFlex>
          <nz-form-label nzFor="volunteerStat">志愿者状态</nz-form-label>
          <nz-form-control class="flex2">
            <nz-select formControlName="volunteerStat" [nzAllowClear]="true">
              <nz-option *ngFor="let item of statList" [nzValue]="item.dictKey" [nzLabel]="item.dictValue"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="col-1-5 col-1-5-md">
        <nz-form-item nzFlex>
          <nz-form-label nzFor="createTime">申请时间</nz-form-label>
          <nz-form-control class="flex2">
            <nz-range-picker formControlName="createTime"></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div style="padding-left: 15px">
        <button nz-button nzType="primary" (click)="search()"><i nz-icon [nzIconfont]="'pets_search'"></i>查询</button>
        <button nz-button nzType="default" (click)="reset()"><i nz-icon [nzIconfont]="'pets_refresh'"></i>重置搜索</button>
      </div>
    </div>
  </form>
  <nz-table
    #table
    [nzShowSizeChanger]="true"
    [nzFrontPagination]="false"
    [nzShowTotal]="totalTemplate"
    [nzTotal]="pageInfo.total"
    [(nzPageIndex)]="pageInfo.pi"
    [(nzPageSize)]="pageInfo.ps"
    [nzData]="dataList"
    [nzLoading]="pageInfo.loading"
    (nzPageIndexChange)="load()"
    (nzPageSizeChange)="search()"
    class="small-table fix-table"
  >
    <thead>
      <tr>
        <th nzWidth="100px">序号</th>
        <th nzWidth="auto">申请人姓名</th>
        <th nzWidth="auto">身份证号码</th>
        <th nzWidth="auto">志愿者昵称</th>
        <th nzWidth="auto">志愿者状态</th>
        <th nzWidth="auto">申请时间</th>
        <th nzWidth="180px">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr class="line" *ngFor="let data of table.data; let i = index">
        <td>
          {{ i + 1 + (this.pageInfo.pi - 1) * this.pageInfo.ps }}
        </td>
        <td title="{{ data['volunteerName'] }}">{{ data['volunteerName'] }}</td>
        <td title="{{ data['idNumber'] }}">{{ data['idNumber'] }}</td>
        <td title="{{ data['volunteerNickname'] }}">{{ data['volunteerNickname'] }}</td>
        <td title="{{ data['volunteerStatName'] }}">
          <i *ngIf="data['volunteerStat'] == 1" nz-icon class="fs20" [nzIconfont]="'pets_drxx53'"></i>
          <i *ngIf="data['volunteerStat'] == 2" nz-icon class="fs20" [nzIconfont]="'pets_form_icon_normal'"></i>
          <i *ngIf="data['volunteerStat'] == 3" nz-icon class="fs20" [nzIconfont]="'pets_guanbi'"></i>
          <i *ngIf="data['volunteerStat'] == 4" nz-icon class="fs20" [nzIconfont]="'pets_form_icon_disable'"></i>
          {{ data['volunteerStatName'] }}
        </td>
        <td title="{{ data['createTime'] }}">{{ data['createTime'] }}</td>
        <td>
          <a (click)="edit(data)" title="编辑"><i nz-icon style="font-size: 28px" [nzIconfont]="'pets_edit'"></i></a>
          <nz-divider nzType="vertical"></nz-divider>
          <a
            title="删除"
            class="line-remove"
            nz-popconfirm
            nzPopconfirmTitle="确认删除吗?"
            nzPopconfirmPlacement="top"
            (nzOnConfirm)="remove(data['id'])"
            ><i nz-icon style="font-size: 28px" [nzIconfont]="'pets_shanchu'"></i
          ></a>
        </td>
      </tr>
    </tbody>
    <ng-template #totalTemplate let-total> 共 {{ total }} 条数据</ng-template>
  </nz-table>
</nz-card>
